<template>
  <div>


    <van-loading v-if="istrue" type="spinner" class="center" size='40px' />
    <div  v-else>
      <van-grid :border="false" :column-num="2">
        <div class="box">
          <router-link
            :to="`/list/${item.productId}`"
            tag="div"
            v-for="(item,index) in list"
            :key="index"
          >
            <div class="back">
              <img :src="item.imgUrl" alt />
            </div>
            <div class="done">{{item.masterName}}</div>
            <div class="dtwo">{{item.slaveName}}</div>
            <div class="dthree">
              <span class="spone">￥</span>
              <span>{{item.minPrice/100}}</span>
            </div>
          </router-link>
        </div>
      </van-grid>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      flag: true,
      page: 1,
      istrue: true,
    };
  },
  methods: {
    gitList() {
      let url = "/product/list";
      this.$axios
        .get(url)
        .then(res => {
          // console.log('res',res);
          this.list = res.list;
          this.istrue = false;
        })
        .catch(err => {
          console.log("err", err);
        });
    },

    getList(page) {
      let url = "/product/list?pageNum=" + page;
      this.$axios
        .get(url)
        .then(res => {
          // console.log("res", res);
          if (res.list.length == 0) {
            window.removeEventListener("scroll", this.scroll);
          } else {
            this.list = [...this.list, ...res.list];
            this.flag = true;
          }
        })
        .catch(err => {
          console.log("err", err);
        });
    },
    scroll() {
      //滚动卷出的高度
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //屏幕的高度
      let screenH = window.screen.height;
      //内容页面的高度
      let pageH = document.documentElement.offsetHeight;
      if (scrollTop + screenH + 10 >= pageH) {
        if (this.flag) {
          this.page++;
          this.flag = false;
          this.getList(this.page);
        }
      }
    }
  },
  created() {
    this.gitList();
    window.addEventListener("scroll", this.scroll);
  }
};
</script>
<style lang="css" scoped>
</style>

<style>
.box {
  padding: 15px 15px 50px 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: white;
}
.back {
  width: 165px;
  height: 165px;

  background: #f4f4f4;
}
.back img {
  width: 165px;
  height: 165px;
}
</style>
<style>
.done {
  line-height: 20px;
  height: 20px;
  font-size: 14px;
  color: #2c3e50;
  width: 165px;
  white-space: nowrap;
  overflow: hidden;
  margin: 5px 0 0 0;
  text-overflow: ellipsis;
}
.dtwo {
  line-height: 20px;
  height: 20px;
  color: #797d82;
  font-size: 12px;
  /* margin-bottom: 2px; */
  width: 165px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* margin-bottom: 5px; */
}
.dthree {
  line-height: 20px;
  height: 20px;
  margin-right: 100px;
  color: #c03131;
}
.dthree span {
  font-size: 15px;
}
.dthree .spone {
  font-size: 12px;
}
.center{
  height: 100vh;
  width: 100vw;
  text-align: center;
  position: fixed;
  top: 30%;
}
</style>